<template>
  <div class="gi_table_page">
    <GiTable
        row-key="id"
        :data="dataList"
        :columns="columns"
        :loading="loading"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :disabled-tools="['size']"
        :disabled-column-keys="['name']"
        @refresh="search"
    >
      <template #toolbar-left>
        <a-input-search v-model="queryForm.artist" placeholder="请输入艺人" allow-clear @search="search"/>
        <a-select
            v-model="queryForm.notes"
            :options="channel_type"
            placeholder="请选择渠道"
            allow-clear
            style="width: 150px"
            @change="search"
        />

<!--        <a-select
            v-model="queryForm.userName"
            :options="username_type"
            placeholder="请选择用户"
            allow-clear
            style="width: 150px"
            @change="search"
        />-->

        <a-button @click="reset">
          <template #icon>
            <icon-refresh/>
          </template>
          <template #default>重置</template>
        </a-button>
      </template>

      <!--      <template #platform="{ record }">-->
      <!--        <GiCellTag :value="record.notes" :dict="channel_type"/>-->
      <!--      </template>-->

      <template #toolbar-right>
        <a-button v-permission="['musician:musicianBind:create']" type="primary" @click="onAdd">
          <template #icon>
            <icon-plus/>
          </template>
          <template #default>申请绑定</template>
        </a-button>
        <a-button v-permission="['musician:musicianBind:export']" @click="onExport">
          <template #icon>
            <icon-download/>
          </template>
          <template #default>导出</template>
        </a-button>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['musician:musicianBind:get']" title="详情" @click="onDetail(record)">详情</a-link>
          <a-link v-permission="['musician:musicianBind:update']" title="修改" @click="onUpdate(record)">补充链接
          </a-link>
          <a-link
              v-permission="['musician:musicianBind:delete']"
              status="danger"
              :disabled="record.disabled"
              :title="record.disabled ? '不可删除' : '删除'"
              @click="onDelete(record)"
          >
            删除
          </a-link>
        </a-space>
      </template>
    </GiTable>

    <MusicianBindAddModal ref="MusicianBindAddModalRef" @save-success="search"/>
    <MusicianBindUpdateModal ref="MusicianBindUpdateModalRef" @save-success="search"/>
    <MusicianBindDetailDrawer ref="MusicianBindDetailDrawerRef"/>
  </div>
</template>

<script setup lang="ts">
import type {TableInstance} from '@arco-design/web-vue'
import MusicianBindAddModal from './MusicianBindAddModal.vue'
import MusicianBindUpdateModal from './MusicianBindUpdateModal.vue'
import MusicianBindDetailDrawer from './MusicianBindDetailDrawer.vue'
import {
  type MusicianBindResp,
  type MusicianBindQuery,
  deleteMusicianBind,
  exportMusicianBind,
  listMusicianBind
} from '@/apis/musician/musicianBind'
import {useDownload, useTable} from '@/hooks'
import {useDict} from '@/hooks/app'
import {isMobile} from '@/utils'
import has from '@/utils/has'
import hasPerm from "@/directives/permission/hasPerm";

defineOptions({name: 'MusicianBind'})

const {channel_type,username_type} = useDict('channel_type','username_type')


const queryForm = reactive<MusicianBindQuery>({
  artist: undefined,
  isBind: undefined,
  userName: undefined,
  sort: ['artist,asc']
})

const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete
} = useTable((page) => listMusicianBind({...queryForm, ...page}), {immediate: true})

const columns: TableInstance['columns'] = [
  {
    title: '序号',
    width: 75,
    align: 'center',
    render: ({rowIndex}) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
    fixed: !isMobile() ? 'left' : undefined,
  },
  {
    title: '艺人', dataIndex: 'artist', slotName: 'artist', sortable: {
      sortDirections: ['ascend', 'descend'],
    }
  },
  {title: '渠道', dataIndex: 'notes', slotName: 'notes'},
  // {title: '用户名称', dataIndex: 'userName', slotName: 'userName'},
  {title: '审批时间', dataIndex: 'updateTime', slotName: 'updateTime'},
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    align: 'center',
    fixed: !isMobile() ? 'right' : undefined,
    show: has.hasPermOr(['musician:musicianBind:get', 'musician:musicianBind:update', 'musician:musicianBind:delete'])
  }
]

// 重置
const reset = () => {
  queryForm.artist = undefined
  queryForm.isBind = undefined
  search()
}

// 删除
const onDelete = (record: MusicianBindResp) => {
  return handleDelete(() => deleteMusicianBind(record.id), {
    content: `是否确定删除该条数据？`,
    showModal: true
  })
}

// 导出
const onExport = () => {
  useDownload(() => exportMusicianBind(queryForm))
}

const MusicianBindAddModalRef = ref<InstanceType<typeof MusicianBindAddModal>>()
const MusicianBindUpdateModalRef = ref<InstanceType<typeof MusicianBindUpdateModal>>()
// 新增
const onAdd = () => {
  MusicianBindAddModalRef.value?.onAdd()
}

// 修改
const onUpdate = (record: MusicianBindResp) => {
  MusicianBindUpdateModalRef.value?.onUpdate(record.id)
}

const MusicianBindDetailDrawerRef = ref<InstanceType<typeof MusicianBindDetailDrawer>>()
// 详情
const onDetail = (record: MusicianBindResp) => {
  MusicianBindDetailDrawerRef.value?.onOpen(record.id)
}
</script>

<style scoped lang="scss"></style>
